<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap-theme.min.css}"/>
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap-admin-theme.css}"/>
    <script th:src="@{../static/js/vue.2.6.js}"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
</head>
<body class="bootstrap-admin-with-small-navbar">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top " role="navigation">
    <div class="container">
        <div class="row">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:href="@{../user/index}">GMS</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a th:href="@{../user/index}">首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">场地<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a th:href="@{../toPlaceApply1}">预约场地</a></li>
                            <li><a th:href="@{../toPlaceUse}">场地使用</a></li>
                            <li><a th:href="@{../toUserPlaceApply}">预约退订</a></li>
                            <li><a th:href="@{../toStanderDetail}">场地收费标准</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">器材<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a th:href="@{../equipment/showEquipment}" >租借</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">赛事<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a th:href="@{../event/touserevent(pageNum=1,userId=${session.username})}">我的赛事</a></li>
                            <li><a th:href="@{../event/toeventcreate}">创建赛事</a></li>
                        </ul>
                    </li>
                    <li class="active">
                        <a th:href="@{../notice/tonoticeuser}">网站公告</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li th:if="${session.permission}!='0'" ><a th:href="@{../management}">管理后台</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">用户<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a th:href="@{../user/toChangeuser}">修改资料</a></li>
                            <li><a th:href="@{../user/toChangepassword}">修改密码</a></li>
                            <li class="divider"></li>
                            <li><a th:href="@{/login}">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </div>
</nav>
<div class="container" id="eventapply">
    <!-- left, vertical navbar & content -->
    <div class="row">
        <div class="row bootstrap-admin-no-edges-padding">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="text-muted bootstrap-admin-box-title">赛事创建</div>
                    </div>
<!--                    分割-->
                    <div class="rbody" id="app">
                        <div class="main">
                            <form th:action="@{/event/eventcreate(Applicants=${session.username})}" method="post" @submit="toKeep">
                            <table class="table">
                                <tbody>
                                <tr>
                                    <th>赛事名称:</th><td colspan="6"><input required="required" type="text" class="form-control" name="EventName" placeholder="请输入名称"></td>
                                </tr>
                                <tr>
                                    <th>赛事场地:</th>
                                    <td colspan="5"><input required="required" type="text" class="form-control" name="EventSite" placeholder="请输入赛事场地"></td>
                                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">场地安排</button></td>
                                </tr>
                                <tr>
                                    <th>赛事时间:</th>
                                    <td colspan="2" >
                                        <div class="input-group">
                                            <input pattern="\d{4}-\d{2}-\d{2}" required="required" title="请正确输入日期" name="EventStartTime1" type="text" class="form-control" placeholder="yyyy-MM-dd">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                        </div>
                                    </td>
                                    <td>到</td>
                                    <td colspan="2" >
                                        <div class="input-group">
                                            <input pattern="\d{4}-\d{2}-\d{2}" required="required" title="请正确输入日期" name="EventEndTime1" type="text" class="form-control" placeholder="yyyy-MM-dd">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                        </div>
                                    </td>
                                    <td><button type="button" class="btn btn-primary">器材安排</button></td>
                                </tr>
                                <tr>
                                    <th>赛事裁判:</th>
                                    <td colspan="2">
                                        <select name="RefereeId" class="form-control">
                                            <option th:each="referee:${list}" th:value="${referee.RefereeId}" th:text="${referee.RefereeName}"></option>
                                        </select>
                                    </td>
                                    <td colspan="3"></td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">裁判简介
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li th:each="referee:${list}"><a th:href="@{../referee/torefereeInformationuser(RefereeId=${referee.RefereeId})}" th:text="${referee.RefereeName}"></a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>赛事负责人:</th><td colspan="2"><input type="text" required="required" class="form-control" name="EventPrincipal" placeholder="请输入姓名"></td>
                                    <th>负责人电话:</th>
                                    <td colspan="3">
                                        <input type="text" pattern="^\d{11}$" required="required" title="请正确输入手机号" class="form-control" name="PrincipalPhone" placeholder="请输入电话">
                                    </td>
                                </tr>
                                <tr>
                                    <th colspan="7">赛事说明:</th>
                                </tr>
                                <tr>
                                    <td colspan="7"><textarea required="required" class="form-control" rows="2" name="EventExplain"></textarea></td>
                                </tr>
                                <tr>
                                    <td colspan="7"><button type="submit" class="btn btn-success" >提交</button></td>
                                </tr>
                                </tbody>
                            </table>
                            </form>
                        </div>
                    </div>
                    <!--场地-->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog" style="width: 80%">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true">×
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        赛事场地选择
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <div class="rbody1">
                                        <div class="main">
                                            <div class="container-fluid">
                                                <div class="col-sm-12" id="right">
                                                    <div class="panel panel-default">

                                                        <div class="panel-heading">
                                                            搜索
                                                        </div>
                                                        <div class="panel-body">
                                                            <form role="form">
                                                                <div  class="form-inline">
                                                                    <div class="form-group">
                                                                        <label>楼层</label>
                                                                        <select class="form-control" v-model="placestorey">
                                                                            <option></option>
                                                                            <option>一楼</option>
                                                                            <option>二楼</option>
                                                                            <option>三楼</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label>场地类型</label>
                                                                        <select class="form-control" v-model="placetype">
                                                                            <option></option>
                                                                            <option>篮球场</option>
                                                                            <option>羽毛球场</option>
                                                                            <option>乒乓球场</option>
                                                                            <option>台球场</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>预约时间</label>
                                                                    <div class="container-fluid">
                                                                        <div class="row">
                                                                            <div class="col-md-3" v-for="item in dateList">
                                                                                <input type="checkbox" v-model="item.active">{{item.date}}
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>预约时间段</label>
                                                                    <div class="container-fluid">
                                                                        <div class="row">
                                                                            <div class="col-md-3" v-for='(time,index) in timeList'>
                                                                                <input type="checkbox" v-model="time.active">{{time.time}}
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <button type="button" class="btn btn-default" @click="researchA()">开始搜索</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>

                                                    <div class="table-responsive">
                                                        <table class="table table-striped ">
                                                            <thead>
                                                            <tr>
                                                                <th>选择</th>
                                                                <th>场地编号</th>
                                                                <th>场地所属楼层</th>
                                                                <th>场地类型</th>
                                                                <th>预约日期</th>
                                                                <th>可预约时间段</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody v-for='(placeapply,index) in dataShow.page' id="msgtable">
                                                                <tr>
                                                                    <td><input type="checkbox" @click="chooseToKeep(index)" v-model="dataShow.checks[index].active"></td>
                                                                    <td>{{placeapply.place_no}}</td>
                                                                    <td>{{placeapply.place_storey}}</td>
                                                                    <td>{{placeapply.place_type}}</td>
                                                                    <td>{{placeapply.apply_date | formatDate}}</td>
                                                                    <td>{{placeapply.apply_period}}</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <ul class="pagination">
                                                        <li><a>共{{pageNum}}页</a></li>
                                                        <li ><a @click="prePage()">&laquo;</a></li>
                                                        <li v-for="index in pageNum" :key="index" @click="turnPage(index)" :class="(currentPage == (index - 1)) ? 'active' : '' ">
                                                            <a><span>{{index}}</span></a>
                                                        </li>
                                                        <li><a @click="nextPage()">&raquo;</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{../static/js/eventplaceapply.js}"></script>
</body>
</html>